<template>
    <el-card>
        <el-table border height="100%" :data="pageRequest.list.value">
            <el-table-column label="序号" type="index" align="center" width="100" />
            <el-table-column label="品牌名称" prop="tmName" align="center" />
            <el-table-column label="品牌LOGO" align="center">
                <template #default="{ row }">
                    <img class="logo" :src="row.logoUrl">
                </template>
            </el-table-column>
            <el-table-column prop="address" label="品牌操作" align="center">
                <el-button icon="Edit" type="primary"></el-button>
                <el-popconfirm title="确认删除?">
                    <template #reference>
                        <el-button icon="Delete" type="danger"></el-button>
                    </template>
                </el-popconfirm>
            </el-table-column>
        </el-table>
        <template #footer>
            <el-pagination :total="total" v-model:page-size="pageSize" v-model:current-page="pageNo"
                :default-page-size="10" :page-sizes="[10, 20, 50, 100]" background
                layout="prev, pager, next,jumper, ->,sizes,total" />
        </template>
    </el-card>
    <div v-if="error">{{ error.message }}</div>
</template>

<script setup lang="ts">
import { reqTrademarks } from '@/api/product/trademark';
import usePageRequest from '@/hooks/usePageRequest';
import useTestStore from '@/store/test';
import { ElMessage } from 'element-plus';
import { onMounted } from 'vue';
const testStore = useTestStore()
let num = 0;

const pageRequest = usePageRequest(async (pageNo, pageSize) => {
    num++
    testStore.dict.set('key' + num, '哈哈')
    console.info(testStore.dict)
    const result = (await reqTrademarks(pageNo, pageSize)).data;
    ElMessage({ type: 'success', message: '程序调用' })
    if (result.ok) {
        return { datas: result.data.records, total: result.data.total }
    }
    await Promise.reject({ code: 100, message: "请求失败" })
})
const pageNo = pageRequest.pageNo
const pageSize = pageRequest.pageSize
const total = pageRequest.total
const error = pageRequest.error




onMounted(async () => {
    pageRequest.doRequest()
});


</script>

<style scoped lang="scss">
::v-deep.el-card {
    height: 100%;

    // .el-card__header {
    //     border-bottom: 0;
    //     padding-bottom: 0;

    // }

    .el-card__body {
        height: 85%;

        .logo {
            height: 100px;
        }

    }

    // .el-card__footer {
    //     padding-top: 0;
    //     border-top: 0;
    // }

}
</style>
